import Vue from 'vue'
import store from '@/store'

/**
 * Action 权限指令
 * 指令用法：
 *  - 在需要控制 action 级别权限的组件上使用 v-action="['资源值']" , 如下：
 *    <i-button v-action="['system:user:add']" >添加用户</a-button>
 *    <a-button v-action="['system:user:delete']">删除用户</a-button>
 *    <a v-action="['system:user:edit']" @click="edit(record)">修改</a>
 *
 *  - 当前用户没有权限时，组件上使用了该指令则会被隐藏
 *  - 当后台权限跟 pro 提供的模式不同时，只需要针对这里的权限过滤进行修改即可
 *
 *  @see https://github.com/vueComponent/ant-design-vue-pro/pull/53
 */
const action = Vue.directive('action', {
  inserted: function (el, binding, vnode) {
    const value = binding.value
    const allPermission = '*:*:*'
    const permissions = store.getters.permissions

    if (value && value instanceof Array && value.length > 0) {
      const permissionFlag = value
      const hasPermissions = permissions.some(permission => {
        return allPermission === permission || permissionFlag.includes(permission)
      })
      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el) || (el.style.display = 'none')
      }
    } else {
      throw new Error(`请设置操作权限标签值`)
    }
  }
})

export default action
